<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动会</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">

    <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="events"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                type="index">
              </el-table-column>
              <el-table-column
                prop="eventId"
                label="运动项目编号">
              </el-table-column>
              <el-table-column
                prop="eventName"
                label="运动项目名称">
              </el-table-column>
              <el-table-column
                prop="eventType"
                label="运动项目类型">
              </el-table-column>
              <el-table-column
                prop="eventRecord"
                label="项目记录">
              </el-table-column>
              <el-table-column
                prop="fields"
                label="运动项目场地">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteOne(scope.row.eventId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        events: [],
        eventList: []
      }
    },
    methods: {
      deleteOne(id) {
        let _this = this;
        console.log(id)
        axios.post('/delete', {
          target: "event",
          id
        })
          .then(function (response) {
            if (response.data.status === 200) {
              location.href = "/eventList"
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created() {
      let _this = this;

      axios.get('/list/event', {})
        .then(function (response) {
          if (response.data.status === 200) {
            _this.eventList = response.data.data;
            _this.events = response.data.data.map(e => {
              return Object.assign(e, {
                fields: e.fields.join("，"),
                eventType: e.eventType === "te" ? "径赛" : "田赛"
              })
            });
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        });
    }
  })
</script>
</body>
</html>
